<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <!-- <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"> -->
    <style>
      .Letter {
        width: 250px;
        height: 250px;
        margin: 0 auto;
        font-size: 200px;
        color: green;
      }
      .time {
        width: 50px;
        margin: 0 auto;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div class="time"></div>
    <div class="Letter"></div>
    <p class="inner"></p>
    <script>
      var time = document.querySelector(".time");
      var Letter = document.querySelector(".Letter");
      var inner = document.querySelector("p");

      var dui = 0;
      var cuo = 0;
      var foo = text();
      Letter.innerHTML = String.fromCharCode(foo);
      inner.innerHTML='请输入看到的字母'

      window.onkeydown = function(ev) {
        console.log(ev.keyCode);
        if (foo == ev.keyCode) {
          dui++;
          console.log("--");
          foo = text();
          Letter.innerHTML = String.fromCharCode(foo);
        } else {
          cuo++;
        }
        inner.innerHTML='正确'+dui+'个'+'错误'+cuo+'个'+'正确率'+(dui/(dui+cuo)*100).toFixed(2)+'%'
      };

      function text() {
        var a = Math.floor(Math.random() * 26 + 65);
        console.log(a);
        return a;
      }

      function mss() {
        var times = 60 * 100;
        countTime = setInterval(function() {
          times = --times < 0 ? 0 : times;
          var ms = Math.floor(times / 100).toString();
          [];
          if (ms.length <= 1) {
            ms = "0" + ms;
          }
          var hm = Math.floor(times % 100).toString();
          if (hm.length <= 1) {
            hm = "0" + hm;
          }
          if (times == 0) {
            alert("游戏结束");
            clearInterval(countTime);
          }
          time.innerHTML = ms + "." + hm;
        }, 10);
      }
      mss();
    </script>
    <!--     <script src="../bootstrap/js/jquery.js"></script >
    <script src="../bootstrap/js/bootstrap.js"></script> -->
  </body>
</html>
